*********************************style.css**************************** *{ margin:0; padding:0; } html,body{ width:100%; height:100%; background:#4e9bfa; } .container{ width:250px; height:350px; background:url(i1.jpg); position:relative; left:50%; top:50%; transform:translate(-50%,-50%); perspective:1000px; } .cover{ width:210px; height:100%; position:absolute; left:40px; background-color:#345b8c; transform:rotateY(-20deg); transform-style:preserve-3d; transform-origin:left; transition:all .5s ease-in; } .container:hover .cover{ transform:rotateY(-180deg); } figure{ margin:0; display:block; position:absolute; width:100%; height:100%; backface-visibility:hidden; } figure.front{ background:url(i2.jpg); } figure.back{ background:url(i3.jpg); transform:rotateY(180deg); }